<%--
  Created by IntelliJ IDEA.
  User: 86173
  Date: 2021/11/22
  Time: 8:14
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<html>
<head>
    <title>Title</title>
    <%
        pageContext.setAttribute("APP_PATH",request.getContextPath());
    %>
    <link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/mystyle.css">

    <script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>

    <script src="${APP_PATH}/static/bootstrap-3.4.1-dist/js/bootstrap.js"></script>

</head>
<body>
<div class="container">
    <header>
        <h1>暮色音乐</h1>
        <div class="row">
            <div class="col-md-2 col-lg-offset-1">
                <c:if test="${user.get(0).userstate == 1}">
                    <button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
                        <span class="glyphicon glyphicon-user"></span> ${user.get(0).username}
                    </button>
                    <script>
                        $(function (){
                            $(".col-md-2 button").click(function (){
                                // alert($("#mypanel").css("display"));
                                if ($("#mypanel").css("display") == "none"){
                                    $("#mypanel").css("display","block");
                                }else {
                                    $("#mypanel").css("display","none");

                                }
                            })
                        })
                    </script>
                </c:if>
                <c:if test="${user.get(0).userstate != 1}">
                    <button type="button" class="btn btn-primary btn-lg" style="color: rgb(169, 163, 161);">
                        <span class="glyphicon glyphicon-user"></span> ${user.get(0).username}
                    </button>
                </c:if>
                <button type="button" class="btn btn-warning" id="exit">注销</button>
<%--                <div class="panel panel-default" id="mypanel">--%>
<%--                    <div class="panel-heading">--%>
<%--                        <h3 class="panel-title">${user.get(0).username}的个人信息</h3>--%>
<%--                    </div>--%>
<%--                    <table class="table">--%>
<%--                        <tr><td>性别:</td><td>${user.get(0).gender}</td></tr>--%>
<%--                        <tr><td>电话:</td><td>${user.get(0).phone}</td></tr>--%>
<%--                        <tr><td>邮箱:</td><td>${user.get(0).email}</td></tr>--%>
<%--                    </table>--%>
<%--                </div>--%>
            </div>
            <div class="col-md-4 col-md-offset-5">
                <button class="btn btn-info btn-md" data-toggle="modal" id="collection" data-target="#myCollection">
                    <span class="glyphicon glyphicon-heart"></span> 我的收藏
                </button>
                <button class="btn btn-info btn-md"  data-toggle="modal"  id="songlist" data-target="#mySongList">
                    <span class="glyphicon glyphicon-music"></span> 我的歌单
                </button>
            </div>
        </div>
<%--        模态框 -----我的收藏 --%>
        <div class="modal fade" id="myCollection" tabindex="-1" role="dialog" aria-labelledby="myModalCollection" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalCollection">收藏列表</h4>
                    </div>
                    <div class="modal-body">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>歌曲</th>
                                <th>作曲</th>
                                <th>作词</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<%--                        <button type="button" class="btn btn-primary">提交更改</button>--%>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
        <%--        模态框 -----我的歌单 --%>
        <div class="modal fade" id="mySongList" tabindex="-1" role="dialog" aria-labelledby="myModalSongList" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalSongList">播放列表</h4>
                    </div>
                    <div class="modal-body">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>歌曲</th>
                                <th>作曲</th>
                                <th>作词</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<%--                        <button type="button" class="btn btn-primary">提交更改</button>--%>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </header>
    <section>
        <ul id="myTab" class="nav nav-tabs">
            <li class="active">
                <a href="#synthesize" data-toggle="tab">
                    综合
                </a>
            </li>
            <li><a href="#fashion" data-toggle="tab">流行</a></li>
            <li><a href="#retro" data-toggle="tab">复古</a></li>
            <li><a href="#classics" data-toggle="tab">经典</a></li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="synthesize">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>歌曲</th>
                        <th>作曲</th>
                        <th>作词</th>
                        <th>类别</th>
                        <th>vip</th>
                    </tr>
                    </thead>
                    <tbody>


                    </tbody>
                </table>
            </div>
            <div class="tab-pane fade" id="fashion">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>歌曲</th>
                        <th>作曲</th>
                        <th>作词</th>
                        <th>类别</th>
                        <th>vip</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
            <div class="tab-pane fade" id="retro">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>歌曲</th>
                        <th>作曲</th>
                        <th>作词</th>
                        <th>类别</th>
                        <th>点击量</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
            <div class="tab-pane fade" id="classics">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>歌曲</th>
                        <th>作曲</th>
                        <th>作词</th>
                        <th>类别</th>
                        <th>点击量</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
        <script>
            $(function(){
                $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                    // 获取已激活的标签页的名称
                    var activeTab = $(e.target).text();
                    // 获取前一个激活的标签页的名称
                    var previousTab = $(e.relatedTarget).text();
                    $(".active-tab span").html(activeTab);
                    $(".previous-tab span").html(previousTab);
                });
            });
        </script>

    </section>
    <footer>
        <%--    显示分页信息--%>
        <div class="row">
            <%--        分页信息--%>
            <div id="page_info" class="col-md-5">

            </div>
            <%--        分页条--%>
            <div id="page_item" class="col-md-7">

            </div>
        </div>
    </footer>
    <c:forEach items="${user}" var="u">
        <td>${u.username}</td>
        <td>${u.userid}</td>
        <td>${u.userpassword}</td>
        <td>${u.userstate}</td>
    </c:forEach>
</div>
</body>
<script>
    $(function (){
        var userid = '${user.get(0).userid}';
        var username = '${user.get(0).username}';
        var userstate = ${user.get(0).userstate};
        //将不同的单击分类下标保存为全局变量，方便不同的显示功能展示
        var kind = 0;
        //定义kind_page_arr数组。保存不同类别跳转时的当前页下标
        var kind_page_arr = [1,1,1,1];
        to_page(0,1);
        //发送Ajax请求查询该用户所对应收藏的歌曲
        // select_collect_all();

        //我的歌单
        $("#songlist").on('click',function (){
            // $('#myCollection').modal()
            //发送Ajax请求查询该用户所对应收藏的歌曲
            select_songlist_all();
        })
        function select_songlist_all(){
            //1、查询所有歌曲
            $.ajax({
                url:"${APP_PATH}/songs",
                type:"get",
                data:"userid="+userid,
                success:function (result){
                    // console.log(result);
                    //在每次发送AJAX请求前，把上一次的数据情况
                    $("#mySongList tbody").empty();
                    //显示收藏歌曲信息
                    show_music_songlist(result);


                }
            })
        }
        function show_music_songlist(result){
            //获取json对象中的歌曲列表
            let songlist = result.extend.song.list;
            //该数组用于获取当前歌曲页面所有歌曲的名字
            // var array=new Array();
            // $("#myTabContent tbody td>span").each(function (index,b){
            //     array.push($(this).text());
            // });
            $.each(songlist,function (index,list){
                // if (collectstate.text() == 1){
                //     $("#myTabContent tbody td").find("span:contains('花海')").parent().find("p>span:eq(0)").css("color","red");
                //
                // }
                // for(let i = 0; i< array.length; i++){
                //     if (collectstate.text() == 1 && song.text() == array[i]){
                //         //如果该歌曲已收藏且与歌曲列表中歌曲名相同，则
                //         //给当前musiclist列表中的收藏图标变红色
                //         console.log(array[i]);
                //         $("#myTabContent tbody td").find("span:contains('花海')").parent().find("p>span:eq(0)").css("color","red");
                //         break;
                //     }
                // }

                let song = $("<td></td>").append(list.music.song);
                let singer = $("<td></td>").append(list.music.singer);
                let composer = $("<td></td>").append(list.music.composer);
                //移除
                let songlistdel = $("<span></span>").addClass("glyphicon glyphicon-minus").attr("del_id",list.music.musicid);
                //播放
                let songlistvoide = $("<span></span>").addClass("glyphicon glyphicon-play");
                let option = $("<td></td>").append(songlistdel).append(songlistvoide);
                let tr = $("<tr></tr>").append(song).append(singer).append(composer).append(option);
                $("#mySongList tbody").append(tr);
            })

        }

        //我的收藏
        $("#collection").on('click',function (){
            // $('#myCollection').modal()
            //发送Ajax请求查询该用户所对应收藏的歌曲
            select_collect_all();
        })
        function select_collect_all(){
            //1、查询所有歌曲
            $.ajax({
                url:"${APP_PATH}/collect",
                type:"get",
                data:"userid="+userid,
                success:function (result){
                    // console.log(result);
                    //在每次发送AJAX请求前，把上一次的数据情况
                    $("#myCollection tbody").empty();
                    //显示收藏歌曲信息
                    show_music_collection(result);


                }
            })
        }
        function show_music_collection(result){
            //获取json对象中的歌曲列表
            let collectlist = result.extend.collect.list;
            //该数组用于获取当前歌曲页面所有歌曲的名字
            // var array=new Array();
            // $("#myTabContent tbody td>span").each(function (index,b){
            //     array.push($(this).text());
            // });
            $.each(collectlist,function (index,list){
                // if (collectstate.text() == 1){
                //     $("#myTabContent tbody td").find("span:contains('花海')").parent().find("p>span:eq(0)").css("color","red");
                //
                // }
                // for(let i = 0; i< array.length; i++){
                //     if (collectstate.text() == 1 && song.text() == array[i]){
                //         //如果该歌曲已收藏且与歌曲列表中歌曲名相同，则
                //         //给当前musiclist列表中的收藏图标变红色
                //         console.log(array[i]);
                //         $("#myTabContent tbody td").find("span:contains('花海')").parent().find("p>span:eq(0)").css("color","red");
                //         break;
                //     }
                // }

                let song = $("<td></td>").append(list.music.song);
                let singer = $("<td></td>").append(list.music.singer);
                let composer = $("<td></td>").append(list.music.composer);
                //移除
                let collectadd = $("<span></span>").addClass("glyphicon glyphicon-plus").attr("add_id",list.musicid).attr("vip",list.music.musicvip);
                //已收藏歌曲

                //添加
                let collectdel = $("<span></span>").addClass("glyphicon glyphicon-minus").attr("del_id",list.music.musicid);
                let option = $("<td></td>").append(collectdel).append(collectadd);
                let tr = $("<tr></tr>").append(song).append(singer).append(composer).append(option);
                $("#myCollection tbody").append(tr);
            })

        }
        //为所有的收藏图标添加点击事件
        $(document).on('click','#myTabContent tbody td p>span:first-child',function (){
            //1、获取当前歌曲的id
            let musicid = $(this).attr("id");
            // alert(musicid);
            //发送Ajax请求修改收藏状态
            $.ajax({
                url:"${APP_PATH}/music/"+musicid,
                type:'put',
                data: "userid="+${user.get(0).userid},
                success:function (result){
                    // console.log(result);
                    //如果状态码为100，刷新当前页面
                    if (result.code == 100){
                        to_page(kind,kind_page_arr[kind]);
                    }else {
                        //失败
                    }
                }
            })
            // alert(musicid);
        })

        //收藏模态框里的删除功能
        //为所有的收藏列表里的删除图标添加点击功能
        $(document).on('click','#myCollection tbody td>span:first-child',function (){
            // alert($(this).attr("del_id"));
            let del_id = $(this).attr("del_id");
            //1、发送Ajax请求删除该条信息
            $.ajax({
                url:"${APP_PATH}/collect/"+del_id,
                type:'delete',
                success:function (result){
                    select_collect_all();
                    to_page(kind,kind_page_arr[kind]);
                }
            })
        })
        //收藏模态框里的添加功能
        //为所有的收藏列表里的添加图标添加点击功能
        $(document).on('click','#myCollection tbody td>span:last-child',function (){

            //1、获取当前歌曲的id
            let musicid = $(this).attr("add_id");
            //扩展，添加前判断该用户是否为vip 该歌曲是否为vip
            //获取该歌曲的vip信息
            let vip = $(this).attr("vip");
            alert(vip);
            if (vip == 1 && userstate == 0){
                // alert("该用户"+username+"不是vip");
                if (confirm("该用户"+username+"不是vip,是否升级为vip")){

                    alert("升级成功！！！");

                    //升级成功之后，发送Ajax请求修改用户的状态
                    $.ajax({
                        url:"${APP_PATH}/user/"+userid,
                        type:'put',
                        success:function (result){
                            // console.log(result);

                            // select_songlist_all();
                            window.location.reload();//刷新当前页面

                        }
                    })
                    <%--//重新读取用户状态--%>
                    <%--$.ajax({--%>
                    <%--    url:"${APP_PATH}/user/"+userid,--%>
                    <%--    type:'get',--%>
                    <%--    success:function (result){--%>
                    <%--        console.log("a");--%>
                    <%--        console.log(result);--%>
                    <%--        console.log("a");--%>
                    <%--        // select_songlist_all();--%>

                    <%--    }--%>
                    <%--})--%>
                }
            }else {
                //判断，该歌曲是否添加过
                //1、获取songlist列表中的所有span的del_id
                let flag = true;
                $("#mySongList tbody td").children('span:first-child').each(function (index,ele){
                    // console.log($(this).attr("del_id"));

                    if (musicid == $(this).attr("del_id") && flag){
                        // data-container="body" data-toggle="popover" data-placement="top"
                        // data-content="顶部的 Popover 中的一些内容"
                        alert("该歌曲"+$(this).parents("tr").find("td:first-child").text()+"已经添加");
                        flag = false;
                    }
                });
                //发送Ajax请求修改收藏状态
                if (flag){
                    if(confirm("是否添加"+$(this).parents("td").find("span:first-child").text()+"歌曲")){
                        alert("该歌曲"+$(this).parents("td").find("span:first-child").text()+"添加成功");
                        $.ajax({
                            url:"${APP_PATH}/music/"+musicid,
                            type:'post',
                            data: "userid="+userid,
                            success:function (result){
                                // console.log(result);

                                select_songlist_all();
                            }
                        })
                    }
                }
            }






            // alert($(this).attr("del_id"));



        })
        //歌单模态框里的删除功能
        //为所有的歌单列表里的删除图标添加点击功能
        $(document).on('click','#mySongList tbody td>span:first-child',function (){
            // alert($(this).attr("del_id"));
            let del_id = $(this).attr("del_id");
            //1、发送Ajax请求删除该条信息


            $.ajax({
                url:"${APP_PATH}/songs/"+del_id,
                type:'delete',
                success:function (result){
                    //如果失败，则没意义
                    select_songlist_all();
                }
            })
        })

        //添加功能
        //给歌曲列表里的所有添加图标添加点击事件
        $(document).on('click','#myTabContent tbody td p>span:last-child',function (){
            //1、获取当前歌曲的id
            let musicid = $(this).attr("id");
            //扩展，添加前判断该用户是否为vip 该歌曲是否为vip
            //获取该歌曲的vip信息
            let vip = $(this).parent().parent().find("a").attr("vip");
            // alert(vip);
            if (vip == 1 && userstate == 0){
                // alert("该用户"+username+"不是vip");
                if (confirm("该用户"+username+"不是vip,是否升级为vip")){

                    alert("升级成功！！！");

                    //升级成功之后，发送Ajax请求修改用户的状态
                    $.ajax({
                        url:"${APP_PATH}/user/"+userid,
                        type:'put',
                        success:function (result){
                            // console.log(result);

                            select_songlist_all();
                            window.location.reload();//刷新当前页面

                        }
                    })
                    <%--//重新读取用户状态--%>
                    <%--$.ajax({--%>
                    <%--    url:"${APP_PATH}/user/"+userid,--%>
                    <%--    type:'get',--%>
                    <%--    success:function (result){--%>
                    <%--        console.log("a");--%>
                    <%--        console.log(result);--%>
                    <%--        console.log("a");--%>
                    <%--        // select_songlist_all();--%>

                    <%--    }--%>
                    <%--})--%>
                }
            }else {
                //判断，该歌曲是否添加过
                //1、获取songlist列表中的所有span的del_id
                let flag = true;
                $("#mySongList tbody td").children('span:first-child').each(function (index,ele){
                    // console.log($(this).attr("del_id"));

                    if (musicid == $(this).attr("del_id") && flag){
                        // data-container="body" data-toggle="popover" data-placement="top"
                        // data-content="顶部的 Popover 中的一些内容"
                        alert("该歌曲"+$(this).parents("tr").find("td:first-child").text()+"已经添加");
                        flag = false;
                    }
                });
                //发送Ajax请求修改收藏状态
                if (flag){
                    if(confirm("是否添加"+$(this).parents("td").find("span:first-child").text()+"歌曲")){
                        alert("该歌曲"+$(this).parents("td").find("span:first-child").text()+"添加成功");
                        $.ajax({
                            url:"${APP_PATH}/music/"+musicid,
                            type:'post',
                            data: "userid="+userid,
                            success:function (result){
                                // console.log(result);

                                select_songlist_all();
                            }
                        })
                    }
                }
            }


            // alert(musicid);
        })

        //1、页面跳转功能 --- 分页显示数据
        //登录成功后默认进入综合类的第一页
        //显示歌曲信息
        function show_music_info(result){
            //获取json对象中的歌曲列表
            let musiclist = result.extend.music.list;
            //遍历tbody
            $.each(musiclist,function (index,list){

                //收藏
                let collect = $("<span></span>").addClass("glyphicon glyphicon-heart").attr("id",list.musicid);
                //添加
                let songadd = $("<span></span>").addClass("glyphicon glyphicon-plus").attr("id",list.musicid);
                //已收藏歌曲
                let musicid = list.musicid;
                // console.log(musicid);

                $("#myCollection tbody td").find("span:last-child").each(function (index,m){
                    // alert(music);
                    // console.log(m);
                    if (musicid == $(this).attr("add_id")){
                            // console.log(musiclike);
                            collect.css("color","red");
                    }
                })

                //付费歌曲
                let musicvip = $("<a></a>").append(list.musicvip).attr("vip",list.musicvip);
                // console.log(musicstate);
                if(musicvip.text() == 1){
                    musicvip.html("");
                    musicvip.addClass("glyphicon glyphicon-usd");
                }else {
                    musicvip.html("");
                }
                let p = $("<p></p>").append(collect).append(songadd);
                let span = $("<span></span>").append(list.song);
                let song = $("<td></td>").append(span).append(p).append(musicvip);
                let singer = $("<td></td>").append(list.singer);
                let composer = $("<td></td>").append(list.composer);
                let kind = $("<td></td>").append(list.kind);
                // console.log(kind.text());
                if(kind.text() == 1){
                    kind.html("流行类");
                }else if(kind.text() == 2){
                    kind.html("复古类");
                }else{
                    kind.html("经典类");
                }
                let hits = $("<td></td>").append(list.hits);
                let tr = $("<tr></tr>").append(song).append(singer).append(composer).append(kind).append(hits);
                $("#myTabContent tbody").append(tr);
            })
        }

        //1、构建分页导航信息
        function show_page_nav(result){
            //1.1显示分页信息
            build_info_show(result) ;
            // 1.2显示分页条
            build_page_item(result) ;

        }
        //1.1显示分页信息
        function build_info_show(result) {
            //获取json对象中的歌曲对象
            let pageInfo = result.extend.music;
            $("#page_info").append("当前页码为"+pageInfo.pageNum+",总页面为："+pageInfo.pages+"页,总共有"+pageInfo.total+"条数据").appendTo("#page_info");
            totalRecord = pageInfo.total;
            //注：如果kind为0，条件不成立，不会记录，所以用恒等于
            if (kind == kind){
                kind_page_arr[kind] = pageInfo.pageNum;
            }
            // alert(kind_page_arr[kind]);
            // switch (kind) {
            //     case 0:
            //         kind_page_arr[kind] = pageInfo.pageNum;
            //         break;
            //     case 1:
            //         kind_page_arr[kind] = pageInfo.pageNum;
            //         break;
            //     case 2:
            //         kind_page_arr[kind] = pageInfo.pageNum;
            //         break;
            //     case 3:
            //         kind_page_arr[kind] = pageInfo.pageNum;
            //         break;
            // }

        }
        // 1.2显示分页条
        function build_page_item(result) {
            //获取json对象中的歌曲对象
            let pageInfo = result.extend.music;
            let nav = $("<nav></nav>").attr("aria-label","Page navigation");
            let ul = $("<ul></ul>").addClass("pagination");

            // 首页
            let li_first = $("<li></li>").append($("<a></a>").append("首页"));
            // 前一页
            let li_pre = $("<li></li>").append($("<a></a>").attr("aria-label","Previous").append("<span></span>").attr("aria-hidden","true").append("&laquo;"));
            if(!pageInfo.hasPreviousPage){
                li_first.addClass("disabled");
                li_pre.addClass("disabled");
            }else {
                li_first.click(function (){
                    to_page(kind,1);
                })
                li_pre.click(function (){
                    to_page(kind,pageInfo.pageNum-1);
                })
            }
            //添加首页，前一页
            ul.append(li_first).append(li_pre);
            //遍历中间页
            $.each(pageInfo.navigatepageNums,function (index,info){
                let li_num = $("<li>").append($("<a></a>").append(info));
                if(pageInfo.pageNum == info){
                    li_num.addClass("active");
                }
                li_num.click(function (){
                    to_page(kind,info);
                })
                //添加中间页
                ul.append(li_num);
            })
            // 后一页
            let li_next = $("<li></li>").append($("<a></a>").attr("aria-label","Next").append("<span></span>").attr("aria-hidden","true").append("&raquo;"));
            // 末页
            let li_last = $("<li></li>").append($("<a></a>").append("末页"));
            if(!pageInfo.hasNextPage){
                li_next.addClass("disabled");
                li_last.addClass("disabled");
            }else {
                li_next.click(function (){
                    to_page(kind,pageInfo.pageNum+1);
                })
                li_last.click(function (){
                    to_page(kind,pageInfo.pages);
                })
            }

            //添加后一页，末页
            ul.append(li_next).append(li_last);
            //添加ul
            nav.append(ul);
            $("#page_item").append(nav);
        }

        function to_page(kind,page){
            select_collect_all();
            //1、查询所有歌曲
            $.ajax({
                url:"${APP_PATH}/music/"+kind,
                data:"pn="+page,
                type:"get",
                success:function (result){
                    // console.log(result);

                    //在每次发送AJAX请求前，把上一次的数据情况
                    $("#myTabContent tbody").empty();
                    $("#page_info").empty();
                    $("#page_item").empty();
                    //显示歌曲信息
                    show_music_info(result);
                    //显示分页信息
                    show_page_nav(result);

                }
            })
        }
        //控制展示信息类别
        $("#myTab li").on('click',function (){
            kind = $(this).index();
            // alert(kind);
            // alert(kind_page_arr[kind]);
            to_page(kind,kind_page_arr[kind]);
        })
        //退出功能
        $("#exit").click(function (){
            $.ajax({
                url:"${APP_PATH}/login",
                type:'get',
                success:function (result){
                    // alert(1111);
                    //由于ajax发送的url到控制层不会进行页面的跳转，因为当请求成功以后，请求依然会回success,所以可以在此再写一遍url进行跳转
                    window.location.href="${APP_PATH}/login";

                }
            })
        })

    })
</script>
</html>
